<!-- home -->
<template>
  <div class="about-container">
    <van-nav-bar title="我的收藏" left-arrow :fixed="true" :placeholder="true" @click-left="$router.go(-1)" />
    <div class="warpper">
      <div class="main-box">
        <van-tabs v-model="active" color="#ff9235" sticky>
          <van-tab title="视频课程" name="0">
            <div class="line"></div>
            <van-list
              v-model="saveCourse.loading"
              :finished="saveCourse.finished"
              finished-text="没有更多了"
              @load="getSaveCourse"
            >
              <div class="item-video-box" @click="goDetailsCourse(item)" v-for="item,index in saveCourse.list.filter(d => d.courseId !== null)" :key="index">
                <div class="img-box">
                  <img :src="item.course.url">
                </div>
                <div class="info-box">
                  <div class="title">{{item.course.name}}</div>
                  <div class="info">{{item.course.desc}}</div>
                  <div class="edit-box">{{item.createdAt}}</div>
                </div>
              </div>
            </van-list>
          </van-tab>
          <van-tab title="直播课程" name="1">
            <div class="line"></div>

            <div style="display: flex;">
              <van-list
                      v-model="listSave.loading"
                      :finished="listSave.finished"
                      @load="getSaveList"
                      style="width: 50%;"
              >
                <div class="item-video-box" @click="goToLiveVideoDetail(item.liveCourse.id)" v-for="item,index in listSave.list.filter(dd => dd.id % 2 == 0)" :key="index">
                  <div class="content-box">
                    <div class="on-left">
                      <div class="img-box">
                        <img :src="item.liveCourse.cover">
                        <van-tag color="#ff3535">{{item.liveCourse.category && item.liveCourse.category.name}}</van-tag>
                      </div>
                      <h3>{{item.liveCourse.name}}</h3>
                      <div class="info">{{item.liveCourse.desc}}</div>
                      <div class="info" style="margin-top: 15px">{{dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</div>
                    </div>
                  </div>
                </div>
              </van-list>

              <van-list
                      v-model="listSave.loading"
                      :finished="listSave.finished"
                      @load="getSaveList"
                      style="width: 50%;"
              >
                <div class="item-video-box" @click="goToLiveVideoDetail(item.liveCourse.id)" v-for="item,index in listSave.list.filter(dd => dd.id % 2 == 1)" :key="index">
                  <div class="content-box">
                    <div class="on-right">
                      <div class="img-box">
                        <img :src="item.liveCourse.cover">
                        <van-tag color="#ff3535">{{item.liveCourse.category && item.liveCourse.category.name}}</van-tag>
                      </div>
                      <h3>{{item.liveCourse.name}}</h3>
                      <div class="info">{{item.liveCourse.desc}}</div>
                      <div class="info" style="margin-top: 15px">{{dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</div>
                    </div>
                  </div>
                </div>
              </van-list>
            </div>

            <div class="item-header" style="text-align: center;font-size: 14px;margin: 30px;">没有更多了..</div>


          </van-tab>
        </van-tabs>
      </div>

    </div>
  </div>
</template>

<script>
// 请求接口
import {getSaveList,getSaveCourse, getSaveCourseAll } from '@/api/user.js'
import dayjs from 'dayjs'

export default {
  data() {
    return {
      userId:null,
      listSave:{
        loading: false,
        finished: false,
        listQuery:{
          pageSize:10,
          pageNum:0,
        },
        list:[]
      },
      saveCourse:{
        loading: false,
        finished: false,
        listQuery:{
          pageSize:10,
          pageNum:0,
        },
        list:[]
      },
      userInfo:null,
      active:'0',
    }
  },
  mounted() {
  },
  created() {
    this.userId = this.$store.getters.userId
  },
  methods: {
    goDetailsCourse(item){
      this.$router.push({
        path:'/videoDetails?courseId='+item.course.id
      })
    },
    async getSaveList(){
      this.listSave.listQuery.pageNum ++
      await getSaveCourseAll({...this.listSave.listQuery,userId: Number(this.$store.getters.userId)}).then(res => {
        if (res.code == 200) {
          this.listSave.list = res.data.filter(d => d.liveCourseId !== null)
          this.listSave.loading= false
          if(res.data.count > this.listSave.list.length){
            this.listSave.finished = false
          }else{
            this.listSave.finished = true
          }
        } else {
          this.$notify(res.message)
        }
      })
    },
    async getSaveCourse(){
      this.saveCourse.listQuery.pageNum ++
      await getSaveCourse({...this.saveCourse.listQuery,userId: Number(this.$store.getters.userId)}).then(res => {
        if (res.code == 200) {
          res.data.rows.map(item => {
            item.createdAt = dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')
          })
          this.saveCourse.list = this.saveCourse.list.concat(res.data.rows)
          this.saveCourse.loading= false
          if(res.data.count > this.saveCourse.list.length){
            this.saveCourse.finished = false
          }else{
            this.saveCourse.finished = true
          }
        } else {
          this.$notify(res.message)
        }
      })
    },
    async onDetails(id){
      this.$router.push({
        path:'/richPage?id='+id
      })
    },
    goToLiveVideoDetail(id) {
      this.$router.push('/liveVideoDetails?liveCourseId=' + id);
    },
  }
}
</script>
<style lang="scss">
.item-video-box{
    background: #fff;
    border-radius: .2778rem;
    display: flex;
    align-items: center;
    padding:.2778rem;
    box-sizing: border-box;
    width: 94%;
    margin:.2778rem auto 0;

  .content-box {
    display: flex;
    justify-content: space-around;
    width: 100%;
    .on-left {
      .info {
        /*height: 28px;*/
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
    .on-right {
      .info {
        /*height: 28px;*/
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
  }

  .img-box{
      flex: 0 0 3rem;
      position: relative;
      img{
        width:100%;
        height: 2.2rem;
        border-radius: .1389rem;
      }
      .van-tag{
        position: absolute;
        top: .1389rem;
        left: .1389rem;
      }
    }
    .info-box{
      flex:1;
      padding: .1389rem .1389rem .1389rem .2778rem;
      box-sizing: border-box;
      height: 2.2rem;
      position: relative;
      .title{
        width:5.5rem;
        font-size: .4167rem;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .info{
        font-size: .3333rem;
        color: #999;
        margin-top: .1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .edit-box{
        position: absolute;
        left: .2778rem;
        bottom: .1rem;
        font-size: .3333rem;
        color: #999;
        width: 100%;
        .van-icon{
          min-width: 1.7rem;
          color: #666;
          display: inline-block;
          &::before{
            margin-right: .1389rem;
            font-size: .3333rem;
            font-weight: bold;
            color: #ff9235;
          }
        }
      }
    }
  }
.about-container {
  /* 你的命名空间 */
  height: 100vh;
  box-sizing: border-box;
  .line{
    height: .0833rem;
    background: #f8f8f8;
  }
  .warpper {
    .main-box{
      padding-bottom: 1.3333rem;
      box-sizing: border-box;
      .cell-box{
        display: flex;
        align-items: center;
      }
      .custom-title{
        margin-left: .1389rem;
        width: 7.7rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: block;
      }
    }
    .header-box{
      background: #fff;
      display: flex;
      padding:.8333rem 0.4rem;
      box-sizing: border-box;
      align-items: center;
      background: url("../../../static/images/bg2.jpg") center center no-repeat;
      background-size:100% auto ;
      position: relative;
      .loginout{
        font-size: .1667rem;
        position: absolute;
        right: .2778rem;
        bottom:.2778rem;
      }
      img{
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 100%;
        background: #fff;
      }
      .info-box{
        flex: 1;
        padding-left: .3rem;
        box-sizing: border-box;
        .name{
          font-size: .5556rem;
        }
        .id{
          font-size: .3056rem;
          padding:.0556rem 0 .2778rem;
          color: #999;
        }
        .van-tag{
          margin-right: .1389rem;
        }
      }
    }
  }
}
</style>
